iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
Modern Web

React Native & Redux 初步探討系列 第 17

Day 17 To Do List - 切版 2

  • 分享至 

  • xImage
  •  

第 17 天!

昨天我們建立了, To Do List 專案

這是我們預期的畫面,

https://ithelp.ithome.com.tw/upload/images/20211002/20112878SWd11M23cK.png

昨天做到
https://ithelp.ithome.com.tw/upload/images/20211002/20112878PLnMYjeJpY.png

今天我們來完成最後下面的代辦事項列表

這代辦事項必須要有兩種狀態顯示,

  • not done
  • done

react-native

我們要建立列表,用的是 react-native 提供的 FlatList component, 它可以讓我們把指定的資料顯示成列表

FlatList

data

列表的原始陣列資料

renderItem

指定列表顯示的項目是哪一個 component

會有三個變數透過 props 傳遞下來,

  • item: 該項目的資料
  • index: 第幾個項目
  • separators: 提供操控 separator component 的 function
    • highlight
    • unhighlight
    • updateProps

updateProps

這比較特別, 它是 function ,

作用是更新指定分隔線的參數,

有兩個參數

  • select: leading & trailing 兩個選項
  • props: 欲額外帶入分隔線的值
separators.updateProps('leading' | 'trailing', props);

假如 select 帶入是 leading, 以觸發項目來判斷,更新上方有分隔線的

反之,帶入 trailing 則會更新下方的分隔線的部份

ItemSeparatorComponent

客製化項目分隔符號,沒設定的話就是無顯示

會有兩個變數透過 props 傳遞下來,

  • highlighted: boolean 值
  • leadingItem: 分隔線上方的項目參數
  • updateProps 額外帶入的值

keyExtractor

以項目資料指定列表的 key 值

那 list 的結構大概是這樣

const list = [
  { id: 1, text: 'to do 1' },
  { id: 2, text: 'to do 2' },
  { id: 3, text: 'to do 3' },
];

<FlatList
  data={list}
  renderItem={({ item, index, separators }) => {
    return (
      <TouchableOpacity>
        <View></View>
        <Text>{item.text}</Text>
      </TouchableOpacity>
    );
  }}
  keyExtractor={(item) => item.id}
/>;

那一樣,我們先看看沒有樣式的畫面如何
https://ithelp.ithome.com.tw/upload/images/20211002/20112878A6u9LM9h4d.png

嗯.. 這真的很乾淨,

我們需要設定一些樣式,

{
  item: {},
  itemEven:{},
  itemOdd:{},
  itemText: {},
  tickArea: {},
  tick: {},
}

帶入結構中會是這樣

<FlatList
  data={list}
  renderItem={({ item, index, separators }) => {
    return (
      <TouchableOpacity style={[styles.item]}>
        <View style={[styles.tickArea]}></View>
        <Text style={[styles.itemText]}>{item.text}</Text>
      </TouchableOpacity>
    );
  }}
  keyExtractor={(item) => item.id}
/>

樣式加入後,

因為列表是有兩個顏色,並且用奇偶數區分,

我們用 index % 2 === 0 來判斷,
最後給予哪個 style

<FlatList
  data={list}
  renderItem={({ item, index, separators }) => {
    const backgroundColorStyle =
      index % 2 === 0 ? styles.itemEven : styles.itemOdd;
    return (
      <TouchableOpacity
        style={[styles.item, backgroundColorStyle, styles.itemDone]}>
        <View style={[styles.tickArea]}></View>
        <Text style={[styles.itemText]}>{item.text}</Text>
      </TouchableOpacity>
    );
  }}
  keyExtractor={(item) => item.id}
/>

那這是一般畫面:
https://ithelp.ithome.com.tw/upload/images/20211002/20112878FB9o2VCTzo.png

這是代辦事項完成後的畫面:
https://ithelp.ithome.com.tw/upload/images/20211002/20112878lTpW0AeVcz.png

至此,我們這 Todo list 畫面告一段落


上一篇
Day 16 To Do List - 切版 1
下一篇
Day 18 To Do List - 加入邏輯 1
系列文
React Native & Redux 初步探討33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言